@import '~styles/colors.less';

.root {
  @total: 36px;
  @corners: 12px;
  @btnsSize: 20px;
  @nonActive: #979797;

  display: table;
  width: 100%;
  table-layout: fixed;
  margin-top: 10px;

  // Parts
  .toggles, .inputs {
    display: inline-block;
    vertical-align: top;
  }

  .toggles {
    position: relative;
    height: @total;
    width: @total;
  }

  .inputs {
    padding-left: 13px;
  }

  // Toggle buttons
  .toggle {
    display: inline-block;
    position: absolute;
    width: @btnsSize;
    height: @btnsSize;
    text-align: left;
    cursor: pointer;

    i {
      color: @nonActive;
      font-size: 15px;
      line-height: 23px;
      position: relative;
    }

    @center: @total / 2 - @btnsSize / 2;

    &:before {
      content: ' ';
      display: inline-block;
      width: 7px;
      height: 7px;
      position: absolute;
    }

    &.tl {
      left: 0;
      top: 0;
      &:before {
        top: 0px;
        left: 0px;
        border-left: 2px solid @nonActive;
        border-top: 2px solid @nonActive;
        border-radius: @corners 0 0 0;
      }
    }
    &.tr {
      text-align: right;
      right: 0;
      top: 0;
      &:before {
        top: 0;
        right: 0;
        border-right: 2px solid @nonActive;
        border-top: 2px solid @nonActive;
        border-radius: 0 @corners 0 0;
      }
    }
    &.center {
      left: @center;
      top: @center;
      &:before {
        top: 3px;
        left: 3px;
        width: 10px;
        height: 10px;
        border: 2px solid @nonActive;
        border-radius: 4px 4px 4px 4px;
      }
    }
    &.br {
      text-align: right;
      right: 0;
      bottom: 0px;
      &:before {
        right: 0;
        bottom: 0;
        border-right: 2px solid @nonActive;
        border-bottom: 2px solid @nonActive;
        border-radius: 0 0 @corners 0;
      }
    }
    &.bl {
      left: 0;
      bottom: 0px;
      &:before {
        left: 0;
        bottom: 0;
        border-left: 2px solid @nonActive;
        border-bottom: 2px solid @nonActive;
        border-radius: 0 0 0 @corners;
      }
    }

    &:hover {
      &:before {
        // border-color: #ffffff;
      }
    }
    &.selected {
      border-color: @primary;
      &:before {
        border-color: @primary;
      }
    }
    &.active {
      &:before {
        border-color: #ffffff;
      }
    }
    &.selected.active {
      &:before {
        border-color: @primary;
      }
    }
  }
}
